import React, {useEffect, useState} from 'react'
import {Card, Descriptions, Empty} from 'antd'
import type {DataSourceTreeNode} from '@components/business/DataSourceTree/types'
import {dataSourceApi} from '@services/api/dataSource'
import type {CatalogVo} from '@/types/api'

const DetailPanel: React.FC<{ node: DataSourceTreeNode | null }> = ({ node }) => {
  if (!node) {
    return (
      <Card>
        <Empty description="请选择左侧树节点" />
      </Card>
    )
  }

  const [catalogDetail, setCatalogDetail] = useState<CatalogVo | null>(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    let mounted = true
    const fetchCatalog = async (catalogName: string) => {
      setLoading(true)
      try {
        const detail = await dataSourceApi.getCatalog(catalogName)
        if (mounted) setCatalogDetail(detail)
      } finally {
        if (mounted) setLoading(false)
      }
    }
    if (node?.nodeType === 'CATALOG') {
      const catalogName = node.catalogName ?? String(node.title)
      setCatalogDetail(null)
      fetchCatalog(catalogName)
    } else {
      setCatalogDetail(null)
    }
    return () => {
      mounted = false
    }
  }, [node?.id, node?.nodeType, node?.catalogName, node?.title])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {node.nodeType === 'CATALOG' && (
        <Card title="目录详情" loading={loading}>
          {catalogDetail ? (
            <Descriptions column={1} size="small" bordered>
              <Descriptions.Item label="目录名">{catalogDetail.catalogName}</Descriptions.Item>
              <Descriptions.Item label="主机">{catalogDetail.host}</Descriptions.Item>
              <Descriptions.Item label="端口">{catalogDetail.port}</Descriptions.Item>
              <Descriptions.Item label="数据库类型">{catalogDetail.databaseType}</Descriptions.Item>
              <Descriptions.Item label="路由">{catalogDetail.route}</Descriptions.Item>
              <Descriptions.Item label="用户名">{catalogDetail.userName}</Descriptions.Item>
              <Descriptions.Item label="连接类型">{catalogDetail.connectType}</Descriptions.Item>
              {catalogDetail.databaseVersion !== undefined && (
                <Descriptions.Item label="数据库版本">{catalogDetail.databaseVersion}</Descriptions.Item>
              )}
              <Descriptions.Item label="Doris目录名">{catalogDetail.dorisCatalogName}</Descriptions.Item>
              <Descriptions.Item label="默认系统码">{catalogDetail.defaultSystemCode}</Descriptions.Item>
              <Descriptions.Item label="启用">{catalogDetail.enabled ? '是' : '否'}</Descriptions.Item>
              {catalogDetail.serverConnected !== undefined && (
                <Descriptions.Item label="服务器连接">{catalogDetail.serverConnected ? '成功' : '失败'}</Descriptions.Item>
              )}
              {catalogDetail.serverConnectedDt && (
                <Descriptions.Item label="服务器连接时间">{catalogDetail.serverConnectedDt}</Descriptions.Item>
              )}
              {catalogDetail.jdbcConnected !== undefined && (
                <Descriptions.Item label="JDBC连接">{catalogDetail.jdbcConnected ? '成功' : '失败'}</Descriptions.Item>
              )}
              {catalogDetail.jdbcConnectedDt && (
                <Descriptions.Item label="JDBC连接时间">{catalogDetail.jdbcConnectedDt}</Descriptions.Item>
              )}
              {catalogDetail.dorisConnected !== undefined && (
                <Descriptions.Item label="Doris连接">{catalogDetail.dorisConnected ? '成功' : '失败'}</Descriptions.Item>
              )}
              {catalogDetail.dorisConnectedDt && (
                <Descriptions.Item label="Doris连接时间">{catalogDetail.dorisConnectedDt}</Descriptions.Item>
              )}
            </Descriptions>
          ) : (
            <Empty description="暂无目录详情" />
          )}
        </Card>
      )}
    </div>
  )
}

export default DetailPanel